<template>
  <div class="profile-container">
    <!-- Header -->
    <div class="header">
      <div class="back-button" @click="back">
        <span class="back-icon">←</span>
      </div>
      <div class="title">{{ userData.title || '做个平淡的自己' }}</div>
      <div class="completion-status">
        资料完成度 {{ userData.completionRate || 0 }}%
        <span class="completion-indicator"></span>
      </div>
    </div>

    <!-- Progress Tip -->
    <div class="progress-tip">
      达到 100%, <span class="highlight-text">匹配更精准</span>
    </div>

    <!-- Profile Content -->
    <div class="profile-content">
      <!-- Profile Image -->
      <div class="profile-image-container">
        <img 
          :src="userData.profileImageUrl || 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250329100153.jpg-Q0DBM0utM7ZMd52JlatQcFOYnvPZxo.jpeg'" 
          alt="Profile avatar" 
          class="profile-image-source"
          style="opacity: 0.01;"
        />
        <div class="profile-image"></div>
      </div>

      <!-- User Info -->
      <div class="user-info-card">
        <div class="user-header">
          <div class="user-name-container">
            <h2 class="user-name">{{ userData.userName || '做个平淡的自己' }}</h2>
            <div class="verified-badge" v-if="userData.isRealNameVerified">
              <span class="verified-icon">✓</span>
              已实名
            </div>
          </div>
          <div class="online-status">
            <span class="online-dot"></span>
            在线
          </div>
        </div>

        <div class="user-basic-info">
          {{ userData.location || '太原' }} · {{ userData.age || 32 }}岁 · {{ userData.houseStatus || '已购房' }} · {{ userData.incomeRange || '5-8千' }}
        </div>

        <div class="user-ip-info">
          IP属地: {{ userData.ipLocation || '上海' }} 
          <span class="question-icon">?</span>
          | {{ userData.dynamicCount || 2 }}条动态
        </div>
      </div>

      <!-- Self Introduction -->
      <div class="self-intro-card">
        <div class="quote-icon">"</div>
        <p class="intro-text">{{ userData.selfIntroduction || '介绍自己，让她更了解你' }}</p>
      </div>

      <!-- Verification Section -->
      <div class="verification-section">
        <h3 class="section-title">他的认证</h3>
        <div class="card-container">
          <div class="verification-grid">
            <div class="verification-item" :class="{ verified: userData.isRealNameVerified }">
              <div class="verification-icon id-icon">
                <span class="icon-content">👤</span>
              </div>
              <div class="verification-text">{{ userData.isRealNameVerified ? '实名已认证' : '实名未认证' }}</div>
            </div>
            <div class="verification-item" :class="{ verified: userData.isEducationVerified }">
              <div class="verification-icon education-icon">
                <span class="icon-content">🎓</span>
              </div>
              <div class="verification-text">{{ userData.isEducationVerified ? '学历已认证' : '学历未认证' }}</div>
            </div>
            <div class="verification-item" :class="{ verified: userData.isIncomeVerified }">
              <div class="verification-icon income-icon">
                <span class="icon-content">¥</span>
              </div>
              <div class="verification-text">{{ userData.isIncomeVerified ? '工作收入已认证' : '工作收入未认证' }}</div>
            </div>
          </div>
          <div class="expand-button">
            <span class="expand-icon">▼</span>
          </div>
        </div>
      </div>

      <!-- Detailed Info Section -->
      <div class="card-container">
        <h3 class="section-title">他的详细资料</h3>
        <div class="info-group">
          <div class="info-icon">
            <span class="icon-person">👤</span>
          </div>
          <div class="info-tags">
            <div class="info-tag">{{ userData.age || 32 }}岁</div>
            <div class="info-tag">{{ userData.maritalStatus || '未婚' }}</div>
            <div class="info-tag">{{ userData.height || 173 }}cm</div>
            <div class="info-tag">{{ userData.constellation || '处女座' }}</div>
          </div>
        </div>
        <div class="info-group">
          <div class="info-icon">
            <span class="icon-location">📍</span>
          </div>
          <div class="info-tags">
            <div class="info-tag">{{ userData.location || '现居太原' }}</div>
            <div class="info-tag">{{ userData.houseStatus || '已购房' }}</div>
          </div>
        </div>
        <div class="info-group">
          <div class="info-icon">
            <span class="icon-work">💼</span>
          </div>
          <div class="info-tags">
            <div class="info-tag">{{ userData.occupation || '物流/仓储' }}</div>
            <div class="info-tag">{{ userData.incomeRange || '月收入5-8千' }}</div>
            <div class="info-tag">{{ userData.education || '大专' }}</div>
          </div>
        </div>
        <div class="info-group">
          <div class="info-icon">
            <span class="icon-family">👪</span>
          </div>
          <div class="info-tags">
            <div class="info-tag">{{ userData.childrenStatus || '没有孩子' }}</div>
          </div>
        </div>
      </div>

      <!-- Partner Preferences Section -->
      <div class="card-container">
        <h3 class="section-title">他的择偶条件</h3>
        <div class="info-group">
          <div class="info-icon">
            <span class="icon-person">👤</span>
          </div>
          <div class="info-tags">
            <div class="info-tag">{{ userData.partnerAgeRange || '24-30岁' }}</div>
            <div class="info-tag">{{ userData.partnerMaritalStatus || '未婚' }}</div>
            <div class="info-tag">{{ userData.partnerHeightRange || '160-170cm' }}</div>
          </div>
        </div>
        <div class="info-group">
          <div class="info-icon">
            <span class="icon-location">📍</span>
          </div>
          <div class="info-tags">
            <div class="info-tag">{{ userData.partnerEducation || '中专' }}</div>
            <div class="info-tag">{{ userData.partnerIncomeRange || '月收入3千-3千' }}</div>
          </div>
        </div>
      </div>

      <!-- Activities Section -->
      <div class="card-container">
        <div class="section-header">
          <h3 class="section-title">他的动态</h3>
          <div class="view-all">查看所有 {{ userData.dynamicCount || 2 }}条 ></div>
        </div>
        <div class="activities-container">
          <div class="activity-item" v-for="(activity, index) in userData.activities" :key="index">
            <div class="video-thumbnail">
              <img 
                :src="activity.thumbnailUrl || 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/4.jpg-Ofrok1piVLaPtDYWa5VPNmHfebmbPO.jpeg'" 
                alt="Activity video thumbnail" 
                class="thumbnail-image"
                style="opacity: 0.01;"
              />
              <div class="video-overlay">
                <div class="play-button">
                  <span class="play-icon">▶</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import request from '@/utils/request'
import router from '@/router';

const props = defineProps({
  userId: {
    type: String,
    required: true
  },
  receiverId: {
    type: String,
    required: true
  }
})

// 定义响应式数据
const userData = ref({});
const formData = new FormData()
formData.append('userId', props.receiverId)

// 定义获取用户数据的函数
const fetchUserData = async () => {
  try {
    const response = await request({
      url: '/api/user-profilePreview',
      method: 'post',
      data: formData,
      headers: {
        'Content-Type': 'multipart/form-data' // 必须设置
      }
    })
    userData.value = response.data;
  } catch (error) {
    console.error('获取用户数据失败:', error);
  }
};

// 在组件挂载时调用获取数据的函数
onMounted(() => {
  fetchUserData();
});

// 编辑资料的函数
const edit = () => {
  // 这里可以添加编辑资料的逻辑
  console.log('编辑资料');
};

const back = () => {
  router.push("/Mine")
}
</script>

<style scoped>
/* Base Styles */
.profile-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  max-width: 414px;
  margin: 0 auto;
  background-color: #f5f5f5;
  min-height: 100vh;
  position: relative;
  color: #333;
}

/* Status Bar */
.status-bar {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  font-weight: bold;
  background: linear-gradient(to bottom, #f8e7f1, #f5f5f5);
}

.status-icons {
  display: flex;
  gap: 8px;
}

.network {
  display: flex;
  align-items: center;
  gap: 4px;
}

.battery {
  background-color: #000;
  color: white;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
}

/* Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background: linear-gradient(to bottom, #f8e7f1, #f5f5f5);
}

.back-button {
  width: 36px;
  height: 36px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.completion-status {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.completion-indicator {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #6366f1;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Progress Tip */
.progress-tip {
  background-color: #333;
  color: white;
  padding: 8px 15px;
  border-radius: 20px;
  text-align: center;
  font-size: 14px;
  margin: 0 15px 15px 15px;
}

.highlight-text {
  color: #ff6b81;
}

/* Profile Content */
.profile-content {
  position: relative;
  padding-bottom: 80px; /* Space for bottom nav */
}

/* Profile Image */
.profile-image-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  margin-bottom: 15px;
}

.profile-image-source {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250329100153.jpg-Q0DBM0utM7ZMd52JlatQcFOYnvPZxo.jpeg');
  background-size: cover;
  background-position: center;
}

/* User Info Card */
.user-info-card {
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  margin: 0 15px 15px 15px;
}

.user-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.user-name-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-name {
  font-size: 20px;
  margin: 0;
}

.verified-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: #4ade80;
  color: white;
  padding: 3px 8px;
  border-radius: 15px;
  font-size: 12px;
}

.verified-icon {
  font-weight: bold;
}

.online-status {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #4ade80;
  font-size: 14px;
}

.online-dot {
  width: 8px;
  height: 8px;
  background-color: #4ade80;
  border-radius: 50%;
}

.user-basic-info {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.user-ip-info {
  font-size: 14px;
  color: #999;
  display: flex;
  align-items: center;
}

.question-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background-color: #e5e5e5;
  border-radius: 50%;
  font-size: 12px;
  margin: 0 5px;
}

/* Self Introduction Card */
.self-intro-card {
  background-color: #f0f0ff;
  border-radius: 10px;
  padding: 15px;
  margin: 0 15px 15px 15px;
  position: relative;
}

.quote-icon {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 40px;
  color: #d0d0ff;
  font-family: serif;
}

.intro-text {
  margin: 0;
  padding-left: 30px;
  color: #666;
}

/* Verification Section */
.verification-section {
  padding: 0 15px;
  margin-bottom: 15px;
}

.section-title {
  font-size: 18px;
  margin: 0 0 10px 0;
}

/* Card Container */
.card-container {
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  margin: 0 15px 15px 15px;
  position: relative;
}

/* Verification Grid */
.verification-grid {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
}

.verification-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.verification-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e5e5e5;
}

.verification-icon.id-icon {
  background-color: #4ade80;
  color: white;
}

.icon-content {
  font-size: 24px;
}

.verification-text {
  font-size: 14px;
  color: #666;
}

.verification-item.verified .verification-text {
  color: #4ade80;
}

.expand-button {
  text-align: center;
  padding: 5px 0;
  color: #999;
}

/* Info Groups */
.info-group {
  display: flex;
  margin-bottom: 15px;
}

.info-group:last-child {
  margin-bottom: 0;
}

.info-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-right: 10px;
}

.info-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}

.info-tag {
  background-color: #f5f5f5;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
}

/* Activities */
.activities-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.activity-item {
  width: 100%;
}

.video-thumbnail {
  position: relative;
  width: 150px;
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
  background-image: url('https://hebbkx1anhila5yf.public.blob.vercel-storage.com/4.jpg-Ofrok1piVLaPtDYWa5VPNmHfebmbPO.jpeg');
  background-size: cover;
  background-position: center;
}

.thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.2);
}

.play-button {
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-icon {
  color: #333;
  font-size: 16px;
  margin-left: 3px; /* Adjust for the play icon's natural offset */
}

/* User ID */
.user-id {
  text-align: center;
  color: #999;
  font-size: 14px;
  margin: 20px 0;
}

/* Edit Profile Button */
.edit-profile-button {
  background-color: #6366f1;
  color: white;
  text-align: center;
  padding: 12px;
  border-radius: 25px;
  margin: 15px;
  font-size: 16px;
  cursor: pointer;
}
</style> 